<template>
  <!-- 简历详情 -->
  <view class="box">
    <view v-if="!loding">
      <!-- #ifdef MP-WEIXIN -->
      <view
        class="head"
        :style="
          'padding-top:' +
          statusBarHeight1 +
          'px;padding-right:' +
          (WXwidth + 15) +
          'px;height:' +
          (statusBarHeight1 + 44) +
          'px'
        "
      >
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view
          class="head"
          :style="
            'padding-top:' + (statusBarHeight1 + 10) + 'px;height:' + (statusBarHeight1 + 54) + 'px'
          "
        >
          <!-- #endif -->
          <view class="ve_image">
            <image
              class="fanhui"
              @click="fanhui"
              src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
              mode=""
            >
            </image>
          </view>
          <view class="head_right"> </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view
          :style="
            'padding-top:' +
            statusBarHeight1 +
            'px;height:' +
            (statusBarHeight1 + 44) +
            'px;background-color: #64B6A8;'
          "
        >
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view
          :style="
            'padding-top:' +
            statusBarHeight1 +
            'px;height:' +
            (statusBarHeight1 + 54) +
            'px;background-color: #64B6A8;'
          "
        >
        </view>
        <!-- #endif -->

        <view class="biographicalNotes">
          <!-- 个人信息 -->
          <view class="personal">
            <view class="title">
              {{ data.resumeTitle }}
            </view>
            <view class="center">
              <view class="left">
                <view :class="userState == 1 || userState == 2 ? 'vague item' : 'item'">{{
                  data.realName
                }}</view>
                <view :class="userState == 1 || userState == 2 ? 'vague item' : 'item'">
                  {{ data.sexualDistinction == 1 ? '男' : '女' }}·{{ data.age }}·{{
                    data.highestEducation.split(' ')[0]
                  }}学历</view
                >
                <view :class="userState == 1 || userState == 2 ? 'vague item' : 'item'"
                  >{{ data.experienceYears }}工作经验
                </view>
              </view>
              <image
                :class="userState == 1 || userState == 2 ? 'vague image' : 'image'"
                :src="data.myPhoto"
                mode=""
              >
              </image>
            </view>
            <view
              :class="userState == 1 || userState == 2 ? 'vague address' : 'address'"
              v-if="data.homeAddress"
            >
              地址:{{ data.homeAddress }}</view
            >
          </view>
          <!-- 教育经历 -->
          <view class="educationalExperience">
            <view class="title"> 教育经历: </view>
            <view
              :class="userState == 1 || userState == 2 ? 'vague iteam' : 'iteam'"
              v-for="(i, j) in data.graduationAcademy"
              :key="j"
            >
              <view class="iteam_top">
                <view class="left">
                  {{ i.schoolName }}
                </view>
                <view class="right">
                  <span class="nf_span">{{ i.schoolHours }}</span>
                  <!-- <image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jlxq_right.png" mode=""></image> -->
                </view>
              </view>
              <view class="iteam_bottom">
                {{ data.highestEducation.split(' ')[0] }}·{{ i.major }}
              </view>
            </view>
          </view>
          <!-- 工作经历 -->
          <view
            class="educationalExperience"
            v-if="data.workExperience && data.workExperience.length"
          >
            <view class="title"> 工作经历: </view>
            <view
              :class="userState == 1 || userState == 2 ? 'vague iteam' : 'iteam'"
              v-for="(i, j) in data.workExperience"
              :key="j + 'jL'"
            >
              <view class="iteam_top">
                <view class="left">
                  {{ i.corporateName }}
                </view>
                <view class="right">
                  <span class="nf_span">{{ i.onJobTime.split('|').join('-') }}</span>
                  <view class="image"></view>
                </view>
              </view>
              <view class="iteam_bottom">
                {{ i.positionName }}
              </view>
              <view class="gznr"> 工作内容：{{ i.jobContent }} </view>
            </view>
          </view>
          <!-- 期望岗位 -->
          <view class="expectedPosition">
            <view class="title"> 期望岗位: </view>
            <view :class="userState == 1 || userState == 2 ? 'vague iteam' : 'iteam'">
              <view class="iteam_view">
                <text :key="index" v-for="(item, index) in data.intendedPosition.split(',')"
                  >{{ item }}
                </text>
              </view>
            </view>
          </view>
          <!-- 期望薪资 -->
          <view class="salaryExpectation">
            <view class="title"> 期望薪资: </view>
            <view :class="userState == 1 || userState == 2 ? 'vague salary' : 'salary'">
              {{ data.salaryExpectation }}元
            </view>
          </view>
          <!-- 个人优势 -->
          <view class="personalAdvantages" v-if="data.personalAdvantages">
            <view class="title"> 个人优势: </view>
            <view :class="userState == 1 || userState == 2 ? 'vague superiority' : 'superiority'">
              <view :class="zkgryxChage ? 'zhankai center' : 'center'">
                <text ref="introduceId">
                  {{ data.personalAdvantages ? data.personalAdvantages : '' }}
                </text>
              </view>
              <view class="zk" v-if="zhankai">
                <view class="zk_right" v-if="zkgryxChage" @click="zhankaiChage()">
                  收起
                  <image
                    class="image"
                    src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd_2.png"
                    mode=""
                  ></image>
                </view>
                <view v-else class="zk_right" @click="zhankaiChage()">
                  展开
                  <image
                    class="image"
                    src="https://pic.bangbangtongcheng.com/static/bbzc/corporation/gs_gd.png"
                    mode=""
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <!-- 加分项 -->
          <view
            class="bonusItem"
            v-if="
              (data.bonusItem.trainingExperience && data.bonusItem.trainingExperience.length) ||
              (data.bonusItem.languageAbility && data.bonusItem.languageAbility.length) ||
              (data.bonusItem.qualification && data.bonusItem.qualification.length) ||
              (data.bonusItem.professionalSkills && data.bonusItem.professionalSkills.length)
            "
          >
            <view
              class="title"
              v-if="
                (data.bonusItem.trainingExperience && data.bonusItem.trainingExperience.length) ||
                (data.bonusItem.languageAbility && data.bonusItem.languageAbility.length) ||
                (data.bonusItem.qualification && data.bonusItem.qualification.length) ||
                (data.bonusItem.professionalSkills && data.bonusItem.professionalSkills.length)
              "
            >
              加分项:
            </view>
            <view :class="userState == 1 || userState == 2 ? 'vague bonus' : 'bonus'">
              <view
                class="item"
                v-if="data.bonusItem.trainingExperience && data.bonusItem.trainingExperience.length"
              >
                培训经历：
                <span v-for="(i, j) in data.bonusItem.trainingExperience" :key="j + 'yy'"
                  >{{
                    i.trainingTime.includes('|')
                      ? i.trainingTime.replace('|', '~')
                      : i.trainingTime
                  }}{{ ' ' + i.trainingInstitutions }}{{ '-' + i.trainingCourse }}</span
                >
              </view>
              <view
                class="item"
                v-if="data.bonusItem.languageAbility && data.bonusItem.languageAbility.length"
              >
                语言能力：
                <span v-for="(i, j) in data.bonusItem.languageAbility" :key="j + 'yy'"
                  >{{ i.languages }}{{ i.listeningSpeakingAbility }}</span
                >
              </view>
              <view
                class="item"
                v-if="data.bonusItem.qualification && data.bonusItem.qualification.length"
              >
                资格证书：
                <span v-for="(i, j) in data.bonusItem.qualification" :key="j + 'zg'">{{
                  i.certificateName
                }}</span>
              </view>
              <view
                class="item"
                v-if="data.bonusItem.professionalSkills && data.bonusItem.professionalSkills.length"
              >
                专业技能：
                <span v-for="(i, j) in data.bonusItem.professionalSkills" :key="j + 'zy'"
                  >{{ i.skillName }}{{ i.mastery }}</span
                >
              </view>
            </view>
          </view>
          <!-- 个人作品 -->
          <view class="personalWorks" v-if="data.bonusItem.personalWorks">
            <view class="title"> 个人作品 </view>
            <view :class="userState == 1 || userState == 2 ? 'vague grzp_s' : 'grzp_s'">
              <image
                v-for="(i, j) in data.bonusItem.personalWorks.split('|')"
                :key="j + 'zp'"
                class="image"
                :src="i"
                mode="aspectFill"
              ></image>
            </view>
          </view>
          <view class="disclaimer">
            {{ disclaimers }}
          </view>
        </view>

        <uniBall></uniBall>
        <uni-popup ref="binds_shield" type="center">
          <view class="binds_shield">
            <view class="text"> 屏蔽后不会对你推荐该人才，你发布的信息也不会对其展示 </view>
            <view class="btn">
              <view class="qx_btn" @click="qx_shield"> 取消 </view>
              <view class="qd_btn" @click="qd_shield"> 确定 </view>
            </view>
          </view>
        </uni-popup>
        <uni-popup ref="identity" type="center" :mask-click="false">
          <view class="binds_identity">
            <view class="text">
              因用户隐私权限设置，需认证企业用户才可查看个人简历，是否要认证招聘企业？
            </view>
            <view class="btn">
              <view class="qx_btn" @click="fanhui()"> 不了 </view>
              <view class="qd_btn" @click="toAuthenticate()"> 去认证 </view>
            </view>
          </view>
        </uni-popup>
        <uni-popup ref="presentResume" type="center" :mask-click="false">
          <view class="binds_identity">
            <view class="title">
              <image
                class="image"
                @click="fanhui()"
                src="https://pic.bangbangtongcheng.com/static/bbzc/jL_close.png"
                mode=""
              ></image>
            </view>
            <view class="text" style="padding: 0 44rpx 44rpx 44rpx">
              根据用户设置，仅对招聘相应岗位的企业展示简历。
            </view>
          </view>
        </uni-popup>
      </view>
      <dLoading v-if="loding"></dLoading>
    </view>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 106
  //  #endif
  export default {
    data() {
      return {
        userInfo: uni.getStorageSync('Pduser'),
        statusBarHeight,
        WXwidth: '',
        zkgryxChage: false,
        zhankai: false,
        disclaimers: '',
        id: '',
        data: {},
        loding: true,
        userState: 0,
        indexss: 0,
      }
    },

    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    async onLoad(option) {
      // #ifdef MP-WEIXIN
      // 获取胶囊信息
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let getWindowInfo = uni.getWindowInfo().screenWidth
      this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
      // #endif
      this.Disclaimers()
      this.id = option.id
      this.indexss = option.indexss
      this.getData()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      shield() {
        this.$refs.binds_shield.open()
      },
      qx_shield() {
        this.$refs.binds_shield.close()
      },
      qd_shield() {
        let data = {}
        data = {
          shieldPeople: this.userInfo.id,
          associationId: this.data.id,
          associationName: this.data.resumeTitle,
          shieldingType: 4,
          shieldingTime: this.$Time.getTimes(),
        }
        this.$myRequest.post('/api/mobile/personnelOwner/increaseShield', data).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          setTimeout(() => {
            if (this.indexss == 1) {
              let pages = getCurrentPages()
              let prevPage = pages[pages.length - 2]
              prevPage.$vm.indexss = 1
            }
            uni.navigateBack({
              delta: 1,
            })
          }, 500)
        })
      },
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url:
            '/pages_recruitMoney/index/report?id=' +
            this.data.id +
            '&userId=' +
            this.data.userInformation.id +
            '&index=2',
        })
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '12',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      lljl() {
        if (!this.userInfo.phone) {
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseBrowsingRecord', {
            browseRecordId: this.id,
            viewersId: this.userInfo.id,
            businessType: 4,
            browsingRecords: 8,
          })
          .then((res) => {})
      },
      sc() {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        let that = this
        this.$myRequest
          .post('/api/mobile/public/favoriteFollowOrCancelFavoriteFollow', {
            collectorId: this.userInfo.id,
            collectionType: 8,
            relationId: this.data.id,
            id: this.data.followCollections ? this.data.followCollections.id : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            this.getData()
          })
      },
      // 获取简历详情
      getData() {
        let that = this
        this.$myRequest
          .get('/api/mobile/personnelOwner/getResumeDetails', {
            id: this.id,
            userId: this.userInfo.id,
            // auditStatus:1,
          })
          .then((res) => {
            res.biographicalNotesDetails.graduationAcademy = JSON.parse(
              res.biographicalNotesDetails.graduationAcademy
            )
            if (res.biographicalNotesDetails.workExperience) {
              res.biographicalNotesDetails.workExperience = JSON.parse(
                res.biographicalNotesDetails.workExperience
              )
            }
            if (res.biographicalNotesDetails.bonusItem) {
              res.biographicalNotesDetails.bonusItem = JSON.parse(
                res.biographicalNotesDetails.bonusItem
              )
              if (res.biographicalNotesDetails.bonusItem.trainingExperience) {
                res.biographicalNotesDetails.bonusItem.trainingExperience = JSON.parse(
                  res.biographicalNotesDetails.bonusItem.trainingExperience
                )
              }
              if (res.biographicalNotesDetails.bonusItem.languageAbility) {
                res.biographicalNotesDetails.bonusItem.languageAbility = JSON.parse(
                  res.biographicalNotesDetails.bonusItem.languageAbility
                )
              }
              if (res.biographicalNotesDetails.bonusItem.qualification) {
                res.biographicalNotesDetails.bonusItem.qualification = JSON.parse(
                  res.biographicalNotesDetails.bonusItem.qualification
                )
              }
              if (res.biographicalNotesDetails.bonusItem.professionalSkills) {
                res.biographicalNotesDetails.bonusItem.professionalSkills = JSON.parse(
                  res.biographicalNotesDetails.bonusItem.professionalSkills
                )
              }
            }
            // if(res.biographicalNotesDetails.visibleRange == 2){
            // 	if(this.userInfo.enterpriseRecruitmentStatus != 1){
            // 		this.userState = 1
            // 	}
            // }else if(res.biographicalNotesDetails.visibleRange == 3){
            // 	this.getRecruit(res.biographicalNotesDetails.intendedPosition)
            // }
            this.data = res.biographicalNotesDetails
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
                // this.identity()
                this.getHeight()
              }, 1000)
            })
          })
      },
      // 获取用户有没有发布过招聘信息
      async getRecruit(position) {
        await this.$myRequest
          .get('/api/mobile/personnelOwner/getWhetherPublishedRecruitment', {
            userId: this.userInfo.id,
            recruitmentType: 1,
            position: position,
          })
          .then((res) => {
            if (res.whetherExistPublishedRecruitment != 1) {
              this.userState = 2
            }
          })
      },
      identity() {
        this.$nextTick(() => {
          if (this.userState == 1) {
            this.$refs.identity.open()
          } else if (this.userState == 2) {
            this.$refs.presentResume.open()
          }
        })
      },
      async sendResume() {
        if (this.userInfo.enterpriseRecruitmentStatus != 1) {
          uni.showToast({
            title: '您还不是公司，无法获取!',
            icon: 'none',
            mask: true,
          })
          return
        }
        let index = await this.getRecruits()
        if (index != 1) {
          uni.showToast({
            title: '您还未发布过招聘，无法获取!',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.$myRequest
          .get('/api/mobile/personnelOwner/obtainResume', {
            userId: this.userInfo.id,
            resumeIds: this.data.id,
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              })
            }, 500)
          })
      },
      async getRecruits() {
        let data = ''
        await this.$myRequest
          .get('/api/mobile/personnelOwner/getWhetherPublishedRecruitment', {
            userId: this.userInfo.id,
          })
          .then((res) => {
            data = res.whetherExistPublishedRecruitment
          })
        return data
      },
      // 获取高度
      getHeight() {
        this.$nextTick(() => {
          let $es = this.$refs.introduceId
          let height = $es.$el.offsetHeight
          if (height > 50) {
            this.zhankai = true
          }
        })
      },
      // 展开个人优势
      zhankaiChage() {
        this.zkgryxChage = !this.zkgryxChage
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      chat() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.data.userInformation.id}&img=${
            this.data.userInformation.image
          }&nikeName=${this.data.userInformation.userName || this.data.userInformation.nikeName}`,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      toAuthenticate() {
        uni.switchTab({
          url: '/pages/my/index',
        })
      },
      async getPhone() {
        this.onphone()
      },
      onphone() {
        if (!this.userInfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseCallRecord', {
            userId: this.userInfo.id,
            businessType: '4',
            telephoneNumber: this.data.userInformation.phone,
            associationId: this.data.id,
            callType: 8,
          })
          .then((res) => {})
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.data.userInformation.phone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 130rpx;
    background-color: #fff;
  }

  // 高斯模糊
  .vague {
    filter: blur(15px);
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background-color: #64b6a8;
    z-index: 1000;

    .ve_image {
      width: 150rpx;
      display: flex;
      align-items: center;

      .fanhui {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .centers {
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
    }

    .head_right {
      width: 150rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
    }
  }

  .feahd_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 120rpx;
    padding: 0 30rpx;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 1000;

    .sendResume {
      width: 242rpx;
      height: 70rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feahd_right {
      flex: 1;
      margin-left: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;

        .img {
          width: 54rpx;
          height: 54rpx;
        }
      }
    }
  }

  .biographicalNotes {
    padding: 0 30rpx;
    margin-top: 40rpx;

    .personal {
      padding-bottom: 40rpx;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        margin-bottom: 30rpx;
      }

      .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 190rpx;

        .left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .item {
            font-size: 30rpx;
            font-weight: 400;
            color: #333333;
          }
        }

        .image {
          margin-left: 30rpx;
          width: 160rpx;
          height: 160rpx;
          border-radius: 160rpx;
        }
      }

      .address {
      }
    }

    .educationalExperience {
      padding: 40rpx 0;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
      }

      .iteam {
        margin-top: 20rpx;

        .iteam_top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10rpx;

          .left {
            font-size: 30rpx;
            font-weight: 600;
            color: #333333;
          }

          .right {
            display: flex;
            align-items: center;

            .nf_span {
              font-size: 30rpx;
              font-weight: 600;
              color: #888888;
            }

            .image {
              width: 35rpx;
              height: 35rpx;
              margin-left: 20rpx;
            }
          }
        }

        .iteam_bottom {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
        }

        .gznr {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-top: 10rpx;
        }
      }
    }

    .expectedPosition {
      padding: 40rpx 0;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
      }

      .iteam {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .iteam_view {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-right: 20rpx;
          margin-bottom: 14rpx;

          text {
            padding-right: 10rpx;
          }
        }
      }
    }

    .salaryExpectation {
      padding: 40rpx 0;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
      }

      .salary {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
      }
    }

    .personalAdvantages {
      padding: 40rpx 0;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
      }

      .superiority {
        .center {
          width: 100%;
          max-height: 50px;
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          overflow: hidden;
        }

        .zhankai {
          max-height: none;
        }

        .zk {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .zk_right {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-weight: 400;
            color: #64b6a8;

            .image {
              width: 22rpx;
              height: 22rpx;
            }
          }
        }
      }
    }

    .bonusItem {
      padding: 40rpx 0;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
      }

      .bonus {
        margin-top: 20rpx;

        .item {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-bottom: 10rpx;
        }
      }
    }

    .personalWorks {
      padding: 40rpx 0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #000000;
      }

      .grzp_s {
        .image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          margin-top: 20rpx;
          margin-right: 45rpx;
        }

        .image:nth-child(3n) {
          margin-right: 0;
        }
      }

      .gend {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .rights {
          font-size: 24rpx;
          font-weight: 400;
          color: #64b6a8;
        }
      }
    }

    .disclaimer {
      margin-top: 40rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #989898;
      line-height: 40rpx;
    }
  }

  .binds_identity {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .title {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 20rpx;
      padding-top: 20rpx;

      .image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }
    }

    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
      padding: 70rpx 44rpx 44rpx 44rpx;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      .qx_btn {
        flex: 1;
        height: 90rpx;
        background-color: #f2f2f2;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 0 10rpx;
      }

      .qd_btn {
        flex: 1;
        height: 90rpx;
        background-color: #64b6a8;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 10rpx 0;
      }
    }
  }

  .binds_shield {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 70rpx 44rpx 44rpx 44rpx;

    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 36rpx;

      .qx_btn {
        width: 160rpx;
        height: 60rpx;
        border-radius: 38rpx;
        border: 1px solid #64b6a8;
        font-size: 30rpx;
        font-weight: 400;
        color: #64b6a8;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .qd_btn {
        width: 160rpx;
        height: 60rpx;
        background-color: #64b6a8;
        border-radius: 38rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
